$(function () {
    function getAdd() {
        $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
            let { data } = res;
            // 我们有了请求以后 就可以写动态页面，页面的结构是有服务器返回的数据 动态创建添加的
            var str = '';
            data.forEach((item) => {
                str += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.bookname}</td>
                    <td>${item.author}</td>
                    <td>${item.publisher}</td>
                    <td><button type="button" class="btn btn-danger">删除</button></td>
                </tr>
                `;
            });
            // 模板字符串更方便，元素的字符串拼接很麻烦，不能轻易换行，要手写html的一些标签 比较繁琐 工作里面一般并不用
            $("#tb").empty().append(str);
        });
    };
    getAdd();

    $("tbody").on("click", ".btn", function () {
        var id = $(this).parent().siblings().eq(0).text()
        // $(this).parent().parent().children().eq(0).text();
        // $(this).attr("data-id")
        // console.log($(this).parent().siblings().eq(0).text());
        $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {
            if (res.status !== 200) {
                return alert('删除图书失败！')
            } else {
                return getAdd()
            }


        })
    })
    $("#btnAdd").on("click", function () {
        let bookname = $('#iptBookname').val().trim()
        let author = $('#iptAuthor').val().trim()
        let publisher = $('#iptPublisher').val().trim()
        console.log(bookname, author, publisher);
        if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
            return alert('请填写完整的图书信息！')
        }
        $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: bookname, author: author, publisher: publisher }, function (res) {
            if (res.status !== 201) return alert('添加图书失败！')
            getAdd()
            $('#iptBookname').val('')
            $('#iptAuthor').val('')
            $('#iptPublisher').val('')

        })
    })
})